<template>
    <div>
        <back-head title="账号切换"></back-head>

        <el-card class="mgb20" shadow="hover" v-for="(value,key) in belongShop" :key="key">
            <div slot="header" class="clearfix">
                <span class="titleType">{{key|shopName}}</span>
            </div>
            <el-row v-if="key=='yimei'">
                <account-page title="欧飞" :dataArr="yimei.ofei" v-on:getData="getData()"></account-page>
                <account-page title="拉卡拉" :dataArr="yimei.lakala" v-on:getData="getData()"></account-page>
                <account-page title="雪虎" :dataArr="yimei.xuehu" v-on:getData="getData()"></account-page>
            </el-row>
            <el-row v-else-if="key=='zhuidian'">
                <account-page title="欧飞" :dataArr="zhuidian.ofei" v-on:getData="getData()"></account-page>
                <account-page title="拉卡拉" :dataArr="zhuidian.lakala" v-on:getData="getData()"></account-page>
                <account-page title="雪虎" :dataArr="zhuidian.xuehu" v-on:getData="getData()"></account-page>
            </el-row>
        </el-card>
    </div>
</template>

<script>        
    import accountPage from './accountPage.vue';
    export default {
        name: 'switchAccount',
        data() {
            return {
                yimei: {
                    ofei: [],
                    lakala: [],
                    xuehu: []
                },
                zhuidian: {
                   ofei: [],
                    lakala: [],
                    xuehu: []
                },
                belongShop:{}, // 1 追电  2 亿特诺美
            }
        },
        components: {
            accountPage
        },
        created(){
            this.getData();
        },
        mounted(){
            
        },
        filters:{
            shopName(value){
                switch(value){
                    case "zhuidian":
                        return "追电"
                    break;
                    case "yimei":
                        return "亿美商城"
                    break;
                }
            }
        },
        methods: {
            getData(){
                this.$axios
                    .post("/admin/provider/queryList.json",{
                        pageNo: 1,
                        pageSize: 2000
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.handleData(data.list);
                        }else{
                            this.$message.error(data.message);
                        }
                    })
            },
            handleData(list){
            
                // channel    1为追电    2为亿特诺美
                // belong  1为欧飞   2为拉卡拉  3为雪虎
                // 区分商户
                let zhuidian = list.filter((ele,i)=>{
                  return ele.channel == 1;
                })
                let yimei = list.filter((ele,i)=>{
                  return ele.channel == 2;
                })
                this.$set(this.belongShop,"zhuidian",zhuidian)
                this.$set(this.belongShop,"yimei",yimei)
                // 区分供应商
                this.yimei.ofei = this.belongShop.yimei.filter((ele,i)=>{
                    return ele.belong == 1;
                })
                this.yimei.lakala = this.belongShop.yimei.filter((ele,i)=>{
                     return ele.belong == 2;
                })
                this.yimei.xuehu = this.belongShop.yimei.filter((ele,i)=>{
                     return ele.belong == 3;
                })
                this.zhuidian.ofei = this.belongShop.zhuidian.filter((ele,i)=>{
                     return ele.belong == 1;
                })
                this.zhuidian.lakala = this.belongShop.zhuidian.filter((ele,i)=>{
                     return ele.belong == 2;
                })
                this.zhuidian.xuehu = this.belongShop.zhuidian.filter((ele,i)=>{
                     return ele.belong == 3;
                })
                
            }
        }
    }

</script>


<style scoped>
    .titleType{
        font-size: 20px;
        font-weight: bold;
    }
</style>
